<template>
  <h1>一个人的信息</h1>
  姓: <input type="text" v-model="person.firstName" />
  <br />
  名: <input type="text" v-model="person.lastName" />
  <br />
  <span>全名:{{ person.fullName }}</span>
  <br />
  全名: <input type="text" v-model="person.fullName" />
</template>

<script>
import { reactive, computed } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: "demo",

  // vue2的计算属性写法
  // computed: {
  //   fullName() {
  //     return this.person.firstName + "-" + this.person.lastName;
  //   },
  // },

  setup() {
    // 数据
    let person = reactive({
      firstName: "张",
      lastName: "三",
      fullName: "",
    });
    
    // vue3的计算属性(没有考虑计算属性被修改的情况)
    person.fullName = computed(() => {
      return person.firstName + "-" + person.lastName;
    });

    // 完整的写法(考虑读和写)
    // person.fullName = computed({
    //   get() {
    //     return person.firstName + "-" + person.lastName;
    //   },
    //   set(value) {
    //     console.log(value); // 张df-三1123w
    //     const newArr = value.split("-");
    //     console.log(newArr); // ['张df','三1123w']
    //     person.firstName = newArr[0];
    //     person.lastName = newArr[1];
    //   },
    // });

    // 返回一个对象(常用)
    return {
      person,
    };
  },
};
</script>


